<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      background-color: #000;
      font-size: 50px;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    let count = 0;
    const obox = document.getElementById('box');
    obox.innerText = count;
    obox.addEventListener('mousemove', throttle(handleMove, 1000, false), false);

    function handleMove() {
      count++;
      obox.innerText = count
    }
    /**
     * @param {function} 要执行的函数
     * @param {number} 等待时间
     * @param {boolean} 是否先立即执行一次
    */
    function debounce(fn, wait, flag) {
      let timer = null;
      return function (...args) {
        if (flag && !timer) {
          fn.apply(this, args)
        }
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, wait)
      }
    }

    // 第一次事件肯定触发，最后一次不会触发
    // 第一次事件不会触发，最后一次一定触发 
    /**
     * @param {function} 要执行的函数
     * @param {number} 等待时间
     * @param {boolean} 是否先立即执行一次
    */
    function throttle(fn, wait, flag) {
      let pre = 0;
      let timer = null;
      return function (args) {
        if (flag) {
          if (Date.now() - pre > wait) {
            pre = Date.now();
            fn.apply(this, args);
          }
        } else {
          if (timer == null) {
            timer = setTimeout(() => {
              timer = null;
              fn.apply(this, args)
            }, wait)
          }
        }
      }
    }
  </script>
</body>

</html>